<script setup lang="ts">
import mp4 from '~/assets/imgs/banner/banner-mp4.png';
import pc4 from '~/assets/imgs/banner/banner-pc4.png';

const bp = useAppBreakpoints();
</script>

<template>
  <swiper-slide class="swiper-slide">
    <div class="swiper-slide__item" @click="$router.push({ name: RN.RANK })">
      <img v-if="bp.tabletl" :src="pc4">
      <img v-else :src="mp4">
      <div class="swiper-slide__item-content">
        <I18nT keypath="gIndSjV1k9SUh1Qk484" tag="div" class="title">
          <template #highlightTxt>
            <span class="text-yellow">VIP</span>
          </template>
        </I18nT>
        <div class="sub-title">
          {{ $t('gD5HRqSdmJo4sXQyj1mKx') }}
        </div>
        <AButton class="ant-cover__Button-3d-primary btn" type="primary">
          {{ $t('etOiK6RcqRweGpbTXpog') }}
        </AButton>
      </div>
    </div>
  </swiper-slide>
</template>

<style scoped lang="scss">
@use './style.scss';
</style>
